<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>商城分类</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">
  <link rel="stylesheet" href="../../../static/wxui/lib/weui.min.css" th:href="@{/wxui/lib/weui.min.css}">
  <link rel="stylesheet" href="../../../static/wxui/css/jquery-weui.css" th:href="@{/wxui/css/jquery-weui.css}">
  <link rel="stylesheet" href="../../../static/wxui/css/style.css" th:href="@{/wxui/css/style.css}">
  <link rel="stylesheet" href="../../../static/wxui/css/hpshop.css" th:href="@{/wxui/css/hpshop.css}">
</head>
<body ontouchstart>
<!--顶部搜索-->
<!--主体-->
	 
<div class="wy-content">
  <div class="category-top">
    <header class='weui-header'>
  <div class="weui-search-bar" id="searchBar">
  <div class="wy-header-icon-back" > <span></span></div>
    <form class="weui-search-bar__form" th:action="@{/goods/front/goProList}">
      <div class="weui-search-bar__box">
        <i class="weui-icon-search"></i>
        <input type="search" class="weui-search-bar__input" name="name" id="searchInput" placeholder="搜索您想要的商品" required th:value="${goods==null? null:goods.name}">
        <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
      </div>
      <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
        <i class="weui-icon-search"></i>
        <span>搜索您想要的商品</span>
      </label>
    </form>
    <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
  </div>
</header>
  </div>
  <aside>
    <div class="menu-left scrollbar-none" id="sidebar">
      <ul>
        <li th:each="big:${bigList}" th:text="${big.name}" th:value="${big.id}" th:class="${big.id==bigList.get(0).id? 'active':null}"></li>
      </ul>
    </div>
  </aside>
  <section class="menu-right padding-all j-content" id="typebox">

  </section>
</div>
<script src="../../../static/wxui/lib/jquery-2.1.4.js" th:src="@{/wxui/lib/jquery-2.1.4.js}"></script>
<script src="../../../static/wxui/lib/fastclick.js" th:src="@{/wxui/lib/fastclick.js}"></script>
<script src="../../../static/wxui/js/jquery-weui.js" th:src="@{/wxui/js/jquery-weui.js}"></script>
<script type="text/javascript">
    $(function() {
        FastClick.attach(document.body);
        $(".wy-header-icon-back").click(function(){
            window.history.back();
        });

        loadSmall();

        function loadSmall() {
            $.ajax({
                type: "post",
                url: "/type/front/smallTypes",
                dataType: 'json',
                data:{
                    goodsTypeId:$(".active").val(),
                    isDelete:1
                },
                success: function (data) {
                    var content = "<h5>"+$(".active").text()+"</h5><ul>";
                    $.each(data.data,function (i,n) {
                        content+="<li class='w-3'>";
                        content+="<a href='/goods/front/goProList?goodsTypeId="+n.id+"'></a>";
                        content+="<img src='"+n.img+"'><span>"+n.name+"</span></li>";
                    })
                    content += "</ul>";
                    $("#typebox").html(content);
                }
            });
        }

        $('#sidebar ul li').click(function(){
            $(this).addClass('active').siblings('li').removeClass('active');
            loadSmall();
        })


    });

</script>
</body>
</html>
